<template>
    <div class="">

        <a-row class="row-class" type="flex" justify="center" :gutter="[16, 0]" v-for="(item, index) in list"
            :key="item.JobItemIndex">
            <!-- 序号 Start -->
            <a-col class="flex-justify-center" :span="1" :order="1" draggable="true" @dragstart.native="dragstart(index)"
                @dragenter.native="dragenter($event, index)" @dragover.native="dragover($event, index)">
                {{ index + 1 }}
            </a-col>
            <!-- 序号 End -->

            <!-- 名称 Start -->
            <a-col class="flex-justify-center" :span="8" :order="2">
                <input-box :item="item" text="JobItemName" :index="index" :titleList='titleList' idx="1" :itm="itm"></input-box>
            </a-col>
            <!-- 名称 End -->

            <!-- 数据源 Start -->
            <a-col class="flex-justify-center" :span="7" :order="3">
                <input-box :item="itm" text="DataSourceName" :index="index"  :titleList='titleList' idx="2" :itm="itm"></input-box>
            </a-col>
            <!-- 数据源 End -->

            <!-- 数据源字段 start -->
            <a-col class="flex-justify-center" :span="6" :order="4">
                <select-box :item="item" text="DataFieldID" :index="index" :list="dataFieldList"></select-box>
                <!-- <input-box :item="item" text="JobItemDesc" :index="index" ></input-box> -->
                <!-- <a-input size="small" v-model="item.JobItemDesc" /> -->
            </a-col>
            <!-- 数据源字段 End -->

            <!-- 删除 Start -->
            <a-col class="flex-justify-center" :span="1" :order="5">
                <a-icon type="close" class="cursor-pointer" @click="delterm(item, index)" />
            </a-col>
            <!-- 删除End -->
        </a-row>
    </div>
</template>
   
<script>
import { getDataFields } from '@/api/DataField'
import { deleteJobItmes } from "@/api/JobItem";
import InputBox from '../InfoMoudle/input-box.vue'
import CheckBox from '../InfoMoudle/check-box.vue'
import SelectBox from '../InfoMoudle/select-box.vue';
export default {
    props: ["list", "typelist", "itm","titleList"],
    components: {
        InputBox,
        CheckBox,
        SelectBox
    },
    data() {
        return {

            dragIndex: "", // 源对象的下标
            enterIndex: "", // 目标对象的下标
            timeout: null, //防抖计时器
            dataFieldList: [],
        };
    },
    watch: {
        list: {
            async handler(newValue, oldValue) {
                let res = await getDataFields({
                    pageRequestModel: {
                        pageIndex: 1,
                        pageSize: 1000,
                    },
                    DataSourceID: this.itm.DataSourceID,
                });
                this.dataFieldList = res.Data.Data;
                this.list.map((item => {
                    item.DataSourceID = this.itm.DataSourceID
                    if (!item.DataFieldID) {
                        item.DataFieldID = res.Data.Data[0].DataFieldID
                        item.DataFieldName = res.Data.Data[0].DataFieldName
                    }
                }))
            },
            immediate: true,
            deep: true,
        }
    },
    methods: {

        dragstart(index) {
            this.dragIndex = index;
        },
        // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。
        // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
        dragenter(e, index) {
            e.preventDefault();
            this.enterIndex = index;
            if (this.timeout !== null) {
                clearTimeout(this.timeout);
            }
            // 拖拽事件的防抖
            this.timeout = setTimeout(() => {
                if (this.dragIndex !== index) {
                    const source = this.list[this.dragIndex];
                    this.list.splice(this.dragIndex, 1);
                    this.list.splice(index, 0, source);
                    // 排序变化后目标对象的索引变成源对象的索引
                    this.dragIndex = index;
                }
            }, 100);
        },
        dragover(e, index) {
            e.preventDefault();
        },
        //弹出高级设置
        settionFun(item) {
            this.$emit("settionShowFun", { item, flag: true });
        },
        //删除项
        delterm(item, index) {
            let _this = this;
            this.$confirm({
                title: "提示",
                content: `是否删除序号为【${item.JobItemIndex}】的项？`,
                async onOk() {
                    if (item.JobItemID) {
                        let res = await deleteJobItmes([item]);
                        _this.$notification.success({
                            message: '提示',
                            description:
                                '删除成功',
                        });
                        _this.$emit("upList", item);
                    } else {
                        _this.list.splice(index, 1);
                    }
                },
                onCancel() { },
            });
        },
    },
};
</script>
   
<style lang = "less" scoped>
.ant-row-flex {
    margin-bottom: 0.9375rem;
}

.ant-row-flex:last-child {
    margin-bottom: 0;
}

.flex-justify-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cursor-class {
    cursor: pointer;
    color: rgb(76, 76, 206);
}
</style>